<script setup name="DocExchange">
import {useRoute} from "vue-router";
import SendDocumentList from "@/views/document/exchange/send/sendDocumentList.vue";
import ReceiveDocumentList from "@/views/document/exchange/receive/receiveDocumentList.vue";
import {docExchangeListStatus} from "@/utils/document.js";
import {tabFunctions} from "@/utils/tab.js";

const {proxy} = getCurrentInstance()
const route = useRoute()
const activeTabName = ref(route.query?.docStatus || '单位发文')
const documentListRefs = ref([])
const {
  handChangeTab,
  handClickTab,
  loopSetRef
} = tabFunctions(activeTabName, documentListRefs)

onActivated(() => {
  const docStatus = route.query.docStatus
  if (docStatus != null) {
    handChangeTab(docStatus)
  }
})

</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--公文数据-->
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-change="handChangeTab" @tab-click="handClickTab">
          <el-tab-pane v-for="(status, index) in docExchangeListStatus"
                       :key="status.value"
                       :name="status.value"
                       :label="status.label"
                       lazy
                       style="padding-bottom: 10px;">
            <SendDocumentList :ref="loopSetRef(index)" v-if="'单位发文' === status.value"/>
            <ReceiveDocumentList :ref="loopSetRef(index)" v-if="'单位收文' === status.value"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
